﻿<!doctype html>
<html class="no-js" lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content=""/>
<!-- Document Title -->
<title>NewsTime - Blogger HTML5 Template</title>

<!-- StyleSheets -->
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/plugin.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/transition.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/color-1.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/font-awesome.min.css">

<!-- Switcher CSS -->
<link href="./switcher/switcher.css" rel="stylesheet" type="text/css"/> 
<link rel="stylesheet" id="skins" href="./css/color-1.css" type="text/css" media="all">

<!-- FontsOnline -->
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,300italic,300,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>


<!-- JavaScripts -->
<script src="js/modernizr.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

<!-- Preloader -->
<div id="preloader">
    <div id="status">
        <div id="container">
            <div class="loader">
                <div class="loader-inner pacman">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Preloader -->

<!-- Wrapper -->
<div class="wrap push">

	<!-- Header -->
    <div class="header-wrap">

        <!-- Top Bar -->
        <div class="top-bar">
            <div class="container">
                <div class="row">

                    <!-- Top Left Nav -->
                    <div class="col-sm-6 col-xs-6">
                        <ul class="top-left">
                            <li><i class="fa fa-phone"></i>+84 868.8568</li>     
                            <li><i class="fa fa-envelope-o"></i>support@example.com</li>
                        </ul>
                    </div>
                    <!-- Top Left Nav -->

                    <!-- Top Right Nav -->
                    <div class="col-sm-6 col-xs-6 r-full-width">
                        <ul class="top-right text-right">
                            <li class="md-trigger" data-modal="login-popup"><a href="#"><i class="fa fa-key">
                            </i>login</a></li>
                            <li class="md-trigger" data-modal="register-popup"><a href="#"><i class="fa fa-user"></i>register</a></li>
                            
                            <!-- cart dropdown --> 
                            <li class="cart dropdown">
                                <a href="#" class="dropdown-toggle btn-cart" data-toggle="dropdown">
                                <i class="fa fa-shopping-cart"></i><span>2</span></a>

                                <!-- dropdown -->
                                <div class="dropdown-menu cart-item"> 
                                    <h3>Recently added item(s)</h3>
                                    <ul class="cart-list">
                                        <!-- product -->
                                        <li>
                                            <div class="cart-product-item">
                                                <div class="product-img">
                                                    <img src="images/cart-1.jpg" alt="image description">
                                                </div>
                                                <div class="detail">
                                                    <span class="product-title">Pearl Izumi Men's E:Motion Tri N1 Neutral Race Shoe</span>
                                                    <span class="price">1 x $124.99</span>
                                                </div>
                                                <a class="btn-delete-item">
                                                    <i class="fa fa-times"></i>
                                                </a>
                                            </div>
                                        </li>
                                        <!-- product -->

                                        <!-- product -->
                                        <li>
                                            <div class="cart-product-item">
                                                <div class="product-img">
                                                    <img src="images/cart-2.jpg" alt="image description">
                                                </div>
                                                <div class="detail">
                                                    <span class="product-title">Pearl Izumi Men's E:Motion Tri N1 Neutral Race Shoe</span>
                                                    <span class="price">1 x $124.99</span>
                                                </div>
                                                <a class="btn-delete-item">
                                                    <i class="fa fa-times"></i>
                                                </a>
                                            </div>
                                        </li>
                                        <!-- product -->

                                        <!-- product -->
                                        <li>
                                            <div class="cart-product-item">
                                                <div class="product-img">
                                                    <img src="images/cart-3.jpg" alt="image description">
                                                </div>
                                                <div class="detail">
                                                    <span class="product-title">Pearl Izumi Men's E:Motion Tri N1 Neutral Race Shoe</span>
                                                    <span class="price">1 x $124.99</span>
                                                </div>
                                                <a class="btn-delete-item">
                                                    <i class="fa fa-times"></i>
                                                </a>
                                            </div>
                                        </li>
                                        <!-- product -->
                                    </ul>
                                    <div class="btn-area">
                                        <a href="#" class="btn btn-viewall pull-left red">View All</a>
                                        <a href="#" class="btn btn-checkout pull-right red">Checkout</a>
                                    </div>
                                </div>
                                <!-- dropdown -->

                            </li>
                            <!-- cart dropdown -->

                        </ul>
                    </div>
                    <!-- Top Right Nav -->

                </div>
            </div>
        </div>
        <!-- Top Bar -->

        <!-- Navigation Holder -->
        <header class="header">
            <div class="container">
                <div class="nav-holder">

                   <!-- Logo Holder -->
                    <div class="logo-holder">
                        <a href="index.html" class="inner-logo"></a>
                    </div>
                    <!-- Logo Holder -->

                    <!-- Navigation -->
                    <div class="cr-navigation">

						<!-- Navbar -->
                         <nav class="cr-nav">
                            <ul>
                                <li>
                                    <a href="index.html">home</a>
                                    <ul>
                                       <li><a href="index-2.html">Home 2</a></li> 
                                       <li><a href="index-3.html">Home 3</a></li> 
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">categories</a>
                                    <ul>
                                       <li><a href="listing-page-1.html">fashion</a></li> 
                                       <li><a href="listing-page-2.html">sports</a></li> 
                                       <li><a href="listing-page-3.html">world</a></li> 
                                       <li><a href="listing-page-4.html">lifestyle</a></li> 
                                       <li><a href="listing-page-5.html">technology</a></li> 
                                       <li><a href="listing-page-6.html">health</a></li> 
                                       <li><a href="listing-page-7.html">MISC</a></li> 
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">post</a>
                                    <ul>
                                       <li><a href="video-post.html">video post</a></li> 
                                       <li><a href="slider-post.html">slider post</a></li> 
                                       <li><a href="post-detail.html">post detail</a></li> 
                                       <li><a href="post-detail-full-width.html">post detail full width</a></li> 
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">shop</a>
                                    <ul>
                                       <li><a href="products.html">products</a></li> 
                                       <li><a href="products-detail.html">products detail</a></li> 
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">contact</a>
                                    <ul>
                                       <li><a href="contact.html">contact 1</a></li> 
                                       <li><a href="contact-2.html">contact 2</a></li> 
                                       <li><a href="contact-3.html">contact 3</a></li> 
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">404</a>
                                     <ul>
                                       <li><a href="error-404-1.html">404 style 1</a></li> 
                                       <li><a href="error-404-2.html">404 style 2</a></li> 
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">pages</a>
                                    <ul>
                                       <li><a href="faq.html">faq</a></li> 
                                       <li><a href="comming-soon.html">comming soon</a></li> 
                                    </ul>
                                </li>
                            </ul>
                        </nav>
						<!-- Navbar -->

                        <!-- Secondry Nav -->
                        <ul class="cr-add-nav">
                            <li><a href="#" class="fa fa-search md-trigger" data-modal="search-popup"></a></li>
                            <li><a href="#menu" class="menu-link"><i class="fa fa-bars"></i></a></li>
                        </ul>
                        <!-- Secondry Nav -->

                    </div>
                    <!-- Navigation -->

                </div>
            </div>
        </header>
        <!-- Navigation Holder -->

    </div>
    <!-- Header -->

    <!-- Inner Bnner -->
    <section class="banner-parallax overlay-dark" data-image-src="images/inner-banner.jpg" data-parallax="scroll"> 
        <div class="inner-banner">
            <h3>post detail</h3>
            <ul class="tm-breadcrum">
                <li><a href="#">Home</a></li>
                <li>post detail</li>
            </ul>
        </div>
    </section>
    <!-- Inner Bnner -->

    <!-- News Headline Container -->
    <div class="news-bar white-bg">
        <div class="container">
            <div class="row">

                <!-- news -->
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-9 r-full-width">
                    <div class="headline-wrap">

                        <span class="badge">just in</span>

                        <!-- news ticker -->
                        <div id="ticker">
                            <div class="clip">
                                <div class="today">
                                    <ul>
                                        <li>Source: Manziel 'hung over' at Browns' meeting Clippers suspend Griffin four games.</li>
                                        <li> "Human &amp; Rights” has been helping the and surviving family Rights” know when  has been.</li>
                                        <li>Source: Manziel 'hung over' at Browns' meeting Clippers suspend Griffin four games.</li>
                                        <li>Source: Manziel 'hung over' at Browns' meeting Clippers suspend Griffin four games.</li>
                                    </ul>
                                </div>
                              </div>
                        </div>
                        <!-- news ticker -->

                        <!-- ticker spinner -->
                        <div class="alert-spinner">
                            <div class="double-bounce1"></div>
                            <div class="double-bounce2"></div>
                        </div>
                        <!-- ticker spinner -->

                    </div>
                </div>
                <!-- news -->

                <!-- time clock -->
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-3 r-full-width">  
                    <div class="time-clock">                  
                        <div id="clock"></div>
                    </div>
                </div>
                <!-- time clock -->

                <!-- Wheather forecast -->
                <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs">
                    <div class="weather-holder">
                        <img src="images/cloud.png" alt="">
                        <span class="weather-state">Cloudy USA, Natha</span>
                        <span class="temp"><i class="fa fa-plus"></i> 18<sup>0</sup> C</span>
                    </div>
                </div>
                <!-- Wheather forecast -->
                
            </div>
        </div>
    </div>
    <!-- News Headline Container -->


    <!-- Main Content -->
    <main class="main-wrap" id="post-detail"> 
        <div class="theme-padding">
            <div class="container">

                <!-- blog detail -->
                <div class="post-widget">

                    <!-- Heading -->
                    <div class="primary-heading">
                        <h2>world news</h2>
                    </div>
                    <!-- Heading -->

                    <!-- blog artical -->
                    <article class="post light-shadow white-bg">
                        
                        <!-- blog pot thumb -->
                        <div class="post-thumb"> 
                            <a href=".#"><img src="images/blog-detail/banner.jpg" alt=""></a>
                            <span class="post-badge">world news</span>
                        </div>
                        <!-- blog pot thumb -->

                        <!-- post detail -->
                        <div class="post-info p-30">

                            <!-- title -->
                            <h3>smart watch technology function in the world</h3>
                            <!-- title -->

							<!-- Post meta -->
                            <div class="post_meta_holder">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- post meta -->
                                        <ul class="post-meta">
                                            <li><i class="fa fa-user"></i>jessica alex</li>
                                            <li><i class="fa fa-clock-o"></i>25 dec, 2016</li>
                                            <li><i class="fa fa-thumbs-o-up"></i>20</li>
                                            <li><i class="fa fa-comments-o"></i>20</li>
                                        </ul>
                                        <!-- post meta -->
                                    </div>
                                    <div class="col-md-6">
                                        <!-- social icons --> 
                                        <div class="blog-social">
                                            <span class="share-icon btn-social-icon btn-adn"  data-toggle="tooltip" data-placement="top"    title="Sharing is Caring">
                                                <span class="fa fa-share-alt"></span>
                                            </span>
                                            <ul>
                                                <li>
                                                    <a class="btn-social-icon btn-facebook" href="#"  data-toggle="tooltip" data-placement="top" title="Share of Facebook">
                                                        <span class="fa fa-facebook"></span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social-icon btn-twitter" href="#"  data-toggle="tooltip" data-placement="top" title="Post on Twitter">
                                                        <span class="fa fa-twitter"></span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social-icon btn-pinterest" href="#"  data-toggle="tooltip" data-placement="top" title="Pin IT">
                                                        <span class="fa fa-pinterest"></span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social-icon btn-linkedin" href="#"  data-toggle="tooltip" data-placement="top" title="Post on Linked In">
                                                        <span class="fa fa-linkedin"></span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="btn-social-icon btn-vimeo" href="#"  data-toggle="tooltip" data-placement="top" title="Post on Twitter">
                                                        <span class="fa fa-vimeo"></span>
                                                    </a>
                                                </li>
                                            </ul>                                                   
                                        </div>
                                        <!-- social icons --> 
                                    </div>
                                </div>
                            </div>
                            <!-- Post meta -->
                            
                            <!-- post description -->
                            <div class="post-desc">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation.</p>
                                <h3>long term investment</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

								<!-- blockqoute -->
								<blockquote class="qoute">
								<p> Phasellus lectus neque, dapibus vitae metus id, tincidunt faucibus enim. Aenean rutrum, est at vestibulum fringilla, sapien purus aliquam ipsum, luctus commodo odio nunc non nibh. </p>
								<div class="current-post-type">
									<i class="fa fa-quote-left"></i>
									</div>
								</blockquote>
								<!-- blockqoute -->

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                                <!-- thumbs -->
                                <div class="row">
                                    <div class="col-sm-3 col-xs-6">
                                        <div class="post-thumb">
                                            <img src="images/blog-detail/thumbs/img-01.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="col-sm-3 col-xs-6">
                                        <div class="post-thumb">
                                            <img src="images/blog-detail/thumbs/img-02.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="col-sm-3 col-xs-6">
                                        <div class="post-thumb">
                                            <img src="images/blog-detail/thumbs/img-03.jpg" alt="">
                                        </div>
                                    </div>
                                     <div class="col-sm-3 col-xs-6">
                                        <div class="post-thumb">
                                            <img src="images/blog-detail/thumbs/img-04.jpg" alt="">
                                        </div>
                                    </div>
                                </div>
                                <!-- thumbs -->

                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation.</p>
                            </div>
                            <!-- post description -->

                            <!-- tags and social icons -->
                            <div class="row mb-20">

                                <!-- populer tags --> 
                                <div class="col-md-6">
                                    <div class="blog-tags font-roboto">
                                        <ul>
                                            <li><a href="#">powerfull</a></li>
                                            <li><a href="#">watch</a></li>
                                            <li><a href="#">mobile</a></li>
                                            <li><a href="#">tab</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- populer tags --> 

                                <!-- social icons --> 
                                <div class="col-md-6">
									<div class="blog-social">
										 <span class="share-icon btn-social-icon btn-adn"  data-toggle="tooltip" data-placement="top" title="Sharing is Caring">
												<span class="fa fa-share-alt"></span>
											</span>
                                        <ul>
                                            <li>
												<a class="btn-social-icon btn-facebook" href="#"  data-toggle="tooltip" data-placement="top" title="Share of Facebook">
													<span class="fa fa-facebook"></span>
												</a>
											</li>
                                            <li>
												<a class="btn-social-icon btn-twitter" href="#"  data-toggle="tooltip" data-placement="top" title="Post on Twitter">
													<span class="fa fa-twitter"></span>
												</a>
											</li>
                                            <li>
												<a class="btn-social-icon btn-pinterest" href="#"  data-toggle="tooltip" data-placement="top" title="Pin IT">
													<span class="fa fa-pinterest"></span>
												</a>
											</li>
                                            <li>
												<a class="btn-social-icon btn-linkedin" href="#"  data-toggle="tooltip" data-placement="top" title="Post on Linked In">
													<span class="fa fa-linkedin"></span>
												</a>
											</li>
											<li>
												<a class="btn-social-icon btn-vimeo" href="#"  data-toggle="tooltip" data-placement="top" title="Post on Twitter">
													<span class="fa fa-vimeo"></span>
												</a>
											</li>
                                         </ul>                                                   
                                    </div>
                                </div>
                                <!-- social icons --> 

                            </div>
                            <!-- tags and social icons -->

                            <!-- reviews and rating -->
                            <div class="row">

                                <!-- blog user reviews -->
                                <div class="col-sm-6">
                                    <div class="blog-user-rating font-roboto">
                                        <strong>average:</strong>
                                        <span>5%</span>
                                        <!-- reviews -->
                                        <ul class="reviews">
                                            <li><i class="fa fa-star"></i></li>
                                            <li><i class="fa fa-star"></i></li>
                                            <li><i class="fa fa-star"></i></li>
                                            <li><i class="fa fa-star"></i></li>
                                            <li><i class="fa fa-star-o"></i></li>
                                        </ul>
                                        <!-- reviews -->
                                    </div>
                                </div>
                                <!-- blog user reviews -->

                                <div class="col-sm-6">
                                    <div class="blog-user-reviews font-roboto">
                                        <strong>user rating :</strong>
                                        <span>6.6 (29 votes)</span>
                                    </div>
                                </div>
                            </div>
                            <!-- reviews and rating -->
                            
                        </div>

                        <!-- post detail -->

                    </article>
                    <!-- blog artical -->
                   
                </div>
                <!-- blog detail -->

                <!-- admin profile -->
                <div class="post-widget p-30 light-shadow white-bg">
                    <div class="auther-profile">
                        <img src="images/auther.jpg" alt="">
                        <div class="auther-info">

                            <div class="auther-social">
                                <div class="auther-name">
                                    <a href="#">john smith</a>
                                    <span>chief markting</span>
                                </div>

                                <!-- social icons -->
                                <ul class="social-style-2">
                                    <li class="fb"><a href="#" class="fa fa-facebook"></a></li>
                                    <li class="tw"><a href="#" class="fa fa-twitter"></a></li>
                                    <li class="li"><a href="#" class="fa fa-linkedin"></a></li>
                                    <li class="sky"><a href="#" class="fa fa fa-skype"></a></li>
                                </ul>
                                <!-- social icons -->
                            </div>


                            <p>Bringing so sociable felicity supplied mr. September the suspicion far him two acuteness perfectly. Covered as an examine so regular offs Ye astonished friendship remarkably no.</p>
                            <div class="signature">
                                <img src="images/sign.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- admin profile -->

                <!-- Slider Widget -->
                <div class="post-widget">

                    <!-- Heading -->
                    <div class="primary-heading">
                        <h2>related posts</h2>
                    </div>
                    <!-- Heading -->

                    <!-- post slider -->
                    <div class="light-shadow gray-bg p-30"> 
                        <div id="post-slider-1">

                            <!-- post -->
                            <div class="post style-1">

                                <!-- thumbnail -->
                                <div class="post-thumb"> 
                                    <img src="images/post-1/img-01.jpg" alt="">
                                    <span class="post-badge">post</span>

                                    <!-- post thumb hover -->
                                    <div class="thumb-hover">
                                        <div class="position-center-center">
                                            <a href="#" class="fa fa-link"></a>
                                        </div>
                                    </div>
                                    <!-- post thumb hover -->
                                    
                                </div>
                                <!-- thumbnail -->
                                <div class="post-content">
                                    <ul class="post-meta">
                                        <li><i class="fa fa-user"></i>jessica alex</li>
                                        <li><i class="fa fa-clock-o"></i>25 dec, 2016</li>
                                        <li><i class="fa fa-thumbs-o-up"></i>20</li>
                                    </ul>
                                    <h5 class="m-0"><a href="#">Full Responsive amazing design And Pixel Perfect </a></h5>
                                </div>
                            </div>
                            <!-- post -->

                            <!-- post -->
                            <div class="post style-1">

                                <!-- thumbnail -->
                                <div class="post-thumb"> 
                                    <img src="images/post-1/img-02.jpg" alt="">
                                    <span class="post-badge">post</span>

                                    <!-- post thumb hover -->
                                    <div class="thumb-hover">
                                        <div class="position-center-center">
                                            <a href="#" class="fa fa-link"></a>
                                        </div>
                                    </div>
                                    <!-- post thumb hover -->

                                </div>
                                <!-- thumbnail -->

                                <div class="post-content">
                                    <ul class="post-meta">
                                        <li><i class="fa fa-user"></i>jessica alex</li>
                                        <li><i class="fa fa-clock-o"></i>25 dec, 2016</li>
                                        <li><i class="fa fa-thumbs-o-up"></i>20</li>
                                    </ul>
                                    <h5 class="m-0"><a href="#">Full Responsive amazing design And Pixel Perfect </a></h5>
                                </div>
                            </div>
                            <!-- post -->

                            <!-- post -->
                            <div class="post style-1">

                                <!-- thumbnail -->
                                <div class="post-thumb"> 
                                    <img src="images/post-1/img-03.jpg" alt="">
                                    <span class="post-badge">post</span>

                                    <!-- post thumb hover -->
                                    <div class="thumb-hover">
                                        <div class="position-center-center">
                                            <a href="#" class="fa fa-link"></a>
                                        </div>
                                    </div>
                                    <!-- post thumb hover -->

                                </div>
                                <!-- thumbnail -->

                                <div class="post-content">
                                    <ul class="post-meta">
                                        <li><i class="fa fa-user"></i>jessica alex</li>
                                        <li><i class="fa fa-clock-o"></i>25 dec, 2016</li>
                                        <li><i class="fa fa-thumbs-o-up"></i>20</li>
                                    </ul>
                                    <h5 class="m-0"><a href="#">Full Responsive amazing design And Pixel Perfect </a></h5>
                                </div>
                            </div>
                            <!-- post -->

                            <!-- post -->
                            <div class="post style-1">

                                <!-- thumbnail -->
                                <div class="post-thumb"> 
                                    <img src="images/post-1/img-01.jpg" alt="">
                                    <span class="post-badge">post</span>

                                    <!-- post thumb hover -->
                                    <div class="thumb-hover">
                                        <div class="position-center-center">
                                            <a href="#" class="fa fa-link"></a>
                                        </div>
                                    </div>
                                    <!-- post thumb hover -->
                                    
                                </div>
                                <!-- thumbnail -->
                                <div class="post-content">
                                    <ul class="post-meta">
                                        <li><i class="fa fa-user"></i>jessica alex</li>
                                        <li><i class="fa fa-clock-o"></i>25 dec, 2016</li>
                                        <li><i class="fa fa-thumbs-o-up"></i>20</li>
                                    </ul>
                                    <h5 class="m-0"><a href="#">Full Responsive amazing design And Pixel Perfect </a></h5>
                                </div>
                            </div>
                            <!-- post -->

                            <!-- post -->
                            <div class="post style-1">

                                <!-- thumbnail -->
                                <div class="post-thumb"> 
                                    <img src="images/post-1/img-02.jpg" alt="">
                                    <span class="post-badge">post</span>

                                    <!-- post thumb hover -->
                                    <div class="thumb-hover">
                                        <div class="position-center-center">
                                            <a href="#" class="fa fa-link"></a>
                                        </div>
                                    </div>
                                    <!-- post thumb hover -->

                                </div>
                                <!-- thumbnail -->

                                <div class="post-content">
                                    <ul class="post-meta">
                                        <li><i class="fa fa-user"></i>jessica alex</li>
                                        <li><i class="fa fa-clock-o"></i>25 dec, 2016</li>
                                        <li><i class="fa fa-thumbs-o-up"></i>20</li>
                                    </ul>
                                    <h5 class="m-0"><a href="#">Full Responsive amazing design And Pixel Perfect </a></h5>
                                </div>
                            </div>
                            <!-- post -->

                            <!-- post -->
                            <div class="post style-1">

                                <!-- thumbnail -->
                                <div class="post-thumb"> 
                                    <img src="images/post-1/img-03.jpg" alt="">
                                    <span class="post-badge">post</span>

                                    <!-- post thumb hover -->
                                    <div class="thumb-hover">
                                        <div class="position-center-center">
                                            <a href="#" class="fa fa-link"></a>
                                        </div>
                                    </div>
                                    <!-- post thumb hover -->

                                </div>
                                <!-- thumbnail -->

                                <div class="post-content">
                                    <ul class="post-meta">
                                        <li><i class="fa fa-user"></i>jessica alex</li>
                                        <li><i class="fa fa-clock-o"></i>25 dec, 2016</li>
                                        <li><i class="fa fa-thumbs-o-up"></i>20</li>
                                    </ul>
                                    <h5 class="m-0"><a href="#">Full Responsive amazing design And Pixel Perfect </a></h5>
                                </div>
                            </div>
                            <!-- post -->
                            <!-- post -->
                            <div class="post style-1">

                                <!-- thumbnail -->
                                <div class="post-thumb"> 
                                    <img src="images/post-1/img-01.jpg" alt="">
                                    <span class="post-badge">post</span>

                                    <!-- post thumb hover -->
                                    <div class="thumb-hover">
                                        <div class="position-center-center">
                                            <a href="#" class="fa fa-link"></a>
                                        </div>
                                    </div>
                                    <!-- post thumb hover -->
                                    
                                </div>
                                <!-- thumbnail -->
                                <div class="post-content">
                                    <ul class="post-meta">
                                        <li><i class="fa fa-user"></i>jessica alex</li>
                                        <li><i class="fa fa-clock-o"></i>25 dec, 2016</li>
                                        <li><i class="fa fa-thumbs-o-up"></i>20</li>
                                    </ul>
                                    <h5 class="m-0"><a href="#">Full Responsive amazing design And Pixel Perfect </a></h5>
                                </div>
                            </div>
                            <!-- post -->

                            <!-- post -->
                            <div class="post style-1">

                                <!-- thumbnail -->
                                <div class="post-thumb"> 
                                    <img src="images/post-1/img-02.jpg" alt="">
                                    <span class="post-badge">post</span>

                                    <!-- post thumb hover -->
                                    <div class="thumb-hover">
                                        <div class="position-center-center">
                                            <a href="#" class="fa fa-link"></a>
                                        </div>
                                    </div>
                                    <!-- post thumb hover -->

                                </div>
                                <!-- thumbnail -->

                                <div class="post-content">
                                    <ul class="post-meta">
                                        <li><i class="fa fa-user"></i>jessica alex</li>
                                        <li><i class="fa fa-clock-o"></i>25 dec, 2016</li>
                                        <li><i class="fa fa-thumbs-o-up"></i>20</li>
                                    </ul>
                                    <h5 class="m-0"><a href="#">Full Responsive amazing design And Pixel Perfect </a></h5>
                                </div>
                            </div>
                            <!-- post -->

                            <!-- post -->
                            <div class="post style-1">

                                <!-- thumbnail -->
                                <div class="post-thumb"> 
                                    <img src="images/post-1/img-03.jpg" alt="">
                                    <span class="post-badge">post</span>

                                    <!-- post thumb hover -->
                                    <div class="thumb-hover">
                                        <div class="position-center-center">
                                            <a href="#" class="fa fa-link"></a>
                                        </div>
                                    </div>
                                    <!-- post thumb hover -->

                                </div>
                                <!-- thumbnail -->

                                <div class="post-content">
                                    <ul class="post-meta">
                                        <li><i class="fa fa-user"></i>jessica alex</li>
                                        <li><i class="fa fa-clock-o"></i>25 dec, 2016</li>
                                        <li><i class="fa fa-thumbs-o-up"></i>20</li>
                                    </ul>
                                    <h5 class="m-0"><a href="#">Full Responsive amazing design And Pixel Perfect </a></h5>
                                </div>
                            </div>
                            <!-- post -->

                        </div>
                    </div>
                    <!-- post slider -->

                </div>
                <!-- Slider Widget -->

                <!-- comments area -->
                <div class="comments-area post-widget">
                   
                    <!-- Heading -->
                    <div class="primary-heading">
                        <h2>3 comments</h2>
                    </div>
                    <!-- Heading -->

                    <div class="comment-holder p-30 light-shadow white-bg">
                        <!-- comment list -->
                        <ul class="comment-list font-roboto">

                            <!-- .comment -->
                            <li class="comment-wrap">
                                <!-- .comment thumb -->
                                <div class="comment-thumb">
                                    <img src="images/comments/img-01.png" alt=""> 
                                </div>
                                <!-- .comment thumb -->

                                <div class="comment-body">
                                    <!-- .comment-auther -->
                                    <a class="comment-author" rel="external nofollow" href="#">john smith</a>
                                    <!-- .comment-auther -->

                                    <div class="comment-content">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus.</p>
                                    </div>
                                     <!-- .comment-meta -->
                                    <header class="comment-meta">
                                        <ul class="post-meta">
                                            <li><i class="fa fa-clock-o"></i>25 dec, 2016</li>
                                            <li><a href="#"><i class="fa fa-reply"></i>reply</a></li>
                                        </ul>   
                                    </header> 
                                     <!-- .comment-meta -->  
                                </div>

                                <!-- sub comment -->
                                <ul class="comment-reply">
                                    <!-- .comment -->
                                    <li class="comment-wrap">
                                       <!-- .comment thumb -->
                                        <div class="comment-thumb">
                                            <img src="images/comments/img-02.png" alt=""> 
                                        </div>
                                        <!-- .comment thumb -->

                                        <div class="comment-body">
                                            <!-- .comment-auther -->
                                            <a class="comment-author" rel="external nofollow" href="#">john smith</a>
                                            <!-- .comment-auther -->

                                            <div class="comment-content">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus.</p>
                                            </div>
                                             <!-- .comment-meta -->
                                            <header class="comment-meta">
                                                <ul class="post-meta">
                                                    <li><i class="fa fa-clock-o"></i>25 dec, 2016</li>
                                                    <li><a href="#"><i class="fa fa-reply"></i>reply</a></li>
                                                </ul>   
                                            </header> 
                                             <!-- .comment-meta -->  
                                        </div>
                                    </li>
                                     <!-- .comment -->
                                </ul>
                                <!-- sub comment -->

                            </li>
                            <!-- .comment -->

                            <!-- .comment -->
                            <li class="comment-wrap">
                                <!-- .comment thumb -->
                                <div class="comment-thumb">
                                    <img src="images/comments/img-03.png" alt=""> 
                                </div>
                                <!-- .comment thumb -->

                                <div class="comment-body">
                                    <!-- .comment-auther -->
                                    <a class="comment-author" rel="external nofollow" href="#">john smith</a>
                                    <!-- .comment-auther -->

                                    <div class="comment-content">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus.</p>
                                    </div>
                                     <!-- .comment-meta -->
                                    <header class="comment-meta">
                                        <ul class="post-meta">
                                            <li><i class="fa fa-clock-o"></i>25 dec, 2016</li>
                                            <li><a href="#"><i class="fa fa-reply"></i>reply</a></li>
                                        </ul>   
                                    </header> 
                                    <!-- .comment-meta -->  
                                </div>

                            </li>
                            <!-- .comment -->

                        </ul>
                        <!-- comment list -->
                    </div>
                </div>
                <!-- comments area -->

                <!-- comment form -->
                 <div class="comment-form">
                    <div class="primary-heading">
                        <h2>Leave your comments</h2>
                    </div>
                     <div class="row">
                        <form method="post">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input class="form-control" type="text" placeholder="Your Name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input class="form-control" type="text" placeholder="User Name">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <input class="form-control" type="text" placeholder="Your email">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <textarea class="form-control" rows="3" placeholder="Please write your message"></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <a href="#" class="btn red full-width">leave comment</a>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- comment form -->  

            </div>
        </div>       
    </main>
    <!-- main content -->

    <!-- Footer Starts -->
    <footer class="footer">

        <!-- Footer Columns -->
        <div class="footer-columns">
            <div class="container">
                <div class="row position-r theme-padding">
                     
                    <!-- widget -->
                    <div class="col-lg-3 col-sm-3 col-xs-6 r-full-width">
                        <!-- Contact widget -->
                        <div class="footer-widget">
                            <div class="contact-list">

                                <!-- Logo Holder -->
                                <a href="index.html" class="inner-logo-2"></a>
                                <!-- Logo Holder -->

                                <ul>
                                    <li><i class="fa fa-map-marker"></i>1600 Elizabeth St, Melbournenis</li>
                                    <li><i class="fa fa-headphones"></i>( +98 ) 88-11-22-888</li>
                                    <li><i class="fa fa-envelope-o"></i>info@crizalpress.com</li>
                                    <li><i class="fa fa-skype"></i>Skype  +1 33-476-927</li>
                                    <li><i class="fa fa-globe"></i>www.crizalpress.com</li>
                                </ul>
                            </div>
                        </div>
                        <!-- Contact widget -->
                    
                    </div>
                    <!-- widget -->

                    <!-- widget -->
                    <div class="col-lg-3 col-sm-3 col-xs-6 r-full-width">
                        <!-- populer post  -->
                        <div class="footer-widget">
                            <h3>recent post</h3>
                            <div class="recent-post-widget">
                                <ul>
                                    <li>
                                        <!-- blog post -->
                                        <div class="post-wrap small-post">
                                            <!-- blog img -->
                                            <div class="post-thumb">
                                                <img src="images/flicker-imgs/img-04.jpg" alt="post">
                                            </div>
                                            <!-- blog img -->

                                            <!-- post detail -->
                                            <div class="post-content">
                                                <h5><a href="#">Luxury Travels Alternative</a></h5>
                                                <!-- post meta -->
                                                <ul class="post-meta">
                                                    <li><i class="icon-clock"></i>25 dec, 2016</li>
                                                    <li><i class="icon-speech-bubble"></i>20</li>
                                                </ul>
                                                <!-- post meta -->
                                            </div>
                                            <!-- post detail -->
                                        </div>
                                        <!-- blog post -->
                                    </li>

                                    <li>
                                        <!-- blog post -->
                                        <div class="post-wrap small-post">
                                            <!-- blog img -->
                                            <div class="post-thumb">
                                                <img src="images/flicker-imgs/img-05.jpg" alt="post">
                                            </div>
                                            <!-- blog img -->

                                            <!-- post detail -->
                                            <div class="post-content">
                                                <h5><a href="#">Luxury Travels Alternative</a></h5>
                                                <!-- post meta -->
                                                <ul class="post-meta">
                                                    <li><i class="icon-clock"></i>25 dec, 2016</li>
                                                    <li><i class="icon-speech-bubble"></i>20</li>
                                                </ul>
                                                <!-- post meta -->
                                            </div>
                                            <!-- post detail -->
                                        </div>
                                        <!-- blog post -->
                                    </li>

                                    <li>
                                        <!-- blog post -->
                                        <div class="post-wrap small-post">
                                            <!-- blog img -->
                                            <div class="post-thumb">
                                                <img src="images/flicker-imgs/img-09.jpg" alt="post">
                                            </div>
                                            <!-- blog img -->

                                            <!-- post detail -->
                                            <div class="post-content">
                                                <h5><a href="#">Luxury Travels Alternative</a></h5>
                                                <!-- post meta -->
                                                <ul class="post-meta">
                                                    <li><i class="icon-clock"></i>25 dec, 2016</li>
                                                    <li><i class="icon-speech-bubble"></i>20</li>
                                                </ul>
                                                <!-- post meta -->
                                            </div>
                                            <!-- post detail -->
                                        </div>
                                        <!-- blog post -->
                                    </li>

                                    <li>
                                        <!-- blog post -->
                                        <div class="post-wrap small-post">
                                            <!-- blog img -->
                                            <div class="post-thumb">
                                                <img src="images/flicker-imgs/img-06.jpg" alt="post">
                                            </div>
                                            <!-- blog img -->

                                            <!-- post detail -->
                                            <div class="post-content">
                                                <h5><a href="#">Luxury Travels Alternative</a></h5>
                                                <!-- post meta -->
                                                <ul class="post-meta">
                                                    <li><i class="icon-clock"></i>25 dec, 2016</li>
                                                    <li><i class="icon-speech-bubble"></i>20</li>
                                                </ul>
                                                <!-- post meta -->
                                            </div>
                                            <!-- post detail -->
                                        </div>
                                        <!-- blog post -->
                                    </li>
                                </ul>
                                
                            </div>
                        </div>
                        <!-- populer post  -->
                    </div>
                    <!-- widget -->
                   
                    <!-- widget -->
                    <div class="col-lg-3 col-sm-3 col-xs-6 r-full-width">
                        <!-- quick links -->
                        <div class="footer-widget mb-30">
                            <h3>quick links</h3>
                            <div class="quick-links">
                                <ul>
                                    <li><a href="#">Criminal or other Practice</a></li>
                                    <li><a href="#">united kingdom news</a></li>
                                    <li><a href="#">Government Announced</a></li>
                                    <li><a href="#">New technology</a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- quick links -->

                         <!-- populer tags -->
                        <div class="footer-widget">
                            <h3 class="mb-20">populer tags</h3>
                            <div class="populer-tags">
                                <ul>
                                    <li><a href="#">html5</a></li>
                                    <li><a href="#">bootstrap</a></li>
                                    <li><a href="#">css3</a></li>
                                    <li><a href="#">technology</a></li>
                                    <li><a href="#">devolopment</a></li>
                                    <li><a href="#">bootstrap</a></li>
                                    <li><a href="#">jquery</a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- populer tags -->
                    </div>
                    <!-- widget -->

                     <!-- widget -->
                    <div class="col-lg-3 col-sm-3 col-xs-6 r-full-width">

                        <!-- Contact widget -->
                        <div class="footer-widget mb-30">
                            <h3>flicker widget</h3>
                            <div class="flicker-imgs-list">
                                <ul>
                                    <li><a href="images/flicker-imgs/img-01.jpg" data-rel='prettyPhoto'><img src="images/flicker-imgs/img-01.jpg" alt=""></a></li>
                                    <li><a href="images/flicker-imgs/img-02.jpg" data-rel='prettyPhoto'><img src="images/flicker-imgs/img-02.jpg" alt=""></a></li>
                                    <li><a href="images/flicker-imgs/img-03.jpg" data-rel='prettyPhoto'><img src="images/flicker-imgs/img-01.jpg" alt=""></a></li>
                                    <li><a href="images/flicker-imgs/img-04.jpg" data-rel='prettyPhoto'><img src="images/flicker-imgs/img-04.jpg" alt=""></a></li>
                                    <li><a href="images/flicker-imgs/img-05.jpg" data-rel='prettyPhoto'><img src="images/flicker-imgs/img-05.jpg" alt=""></a></li>
                                    <li><a href="images/flicker-imgs/img-06.jpg" data-rel='prettyPhoto'><img src="images/flicker-imgs/img-06.jpg" alt=""></a></li>
                                    <li><a href="images/flicker-imgs/img-07.jpg" data-rel='prettyPhoto'><img src="images/flicker-imgs/img-07.jpg" alt=""></a></li>
                                    <li><a href="images/flicker-imgs/img-08.jpg" data-rel='prettyPhoto'><img src="images/flicker-imgs/img-08.jpg" alt=""></a></li>
                                    
                                </ul>
                            </div>
                        </div>
                        <!-- Contact widget -->

                        <!-- Newsletter widget -->
                        <div class="footer-widget">
                            <h3 class="mb-15">newsletter</h3>
                            <div class="newsletter-form">
                                <p>Enter your email here</p>
                                <form>
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                        <input type="text" class="form-control" placeholder="Your Email">
                                        <span class="input-group-btn">
                                          <button type="submit" class="btn btn-icon">
                                            <i class="fa fa-paper-plane"></i></button> 
                                        </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- Newsletter widget -->

                    </div>
                    <!-- widget -->

                    <!-- back To Button -->
                    <span id="scrollup" class="scrollup"><i class="fa fa-angle-up"></i></span>
                    <!-- back To Button -->
                    
                </div>
            </div>
        </div>
        <!-- Footer Columns -->

        <!-- Copyright Bar -->
        <div class="sub-footer">
            <div class="container">
                <div class="copyright-bar">
                    <p>crizal press <i class="fa fa-copyright"></i> 2015, All Rights Reserved</p>
                    <ul>
                         <li><a href="#">home</a></li>
                         <li><a href="#">about</a></li>
                         <li><a href="#">blog</a></li>
                         <li><a href="#">contact us</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Copyright Bar -->

        <!-- contact popup -->
        <div class="footer-contact-popup">
            <div class="popup-wrap">
                <a href="#" id="popup-btn"><i class="fa fa-envelope-o"></i></a> 
                <div class="contact-holder">
                    <h4>Send us a message</h4>
                    <div class="contact-form">
                        <form>
                            <div class="form-group">
                                <input type="text" placeholder="Your Name" class="form-control">
                            </div>
                            <div class="form-group">
                                <input type="email" placeholder="Your Email" class="form-control">
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" placeholder="Message" rows="3"></textarea>
                            </div>
                            <a href="#" class="btn red full-width"><span>Send</span></a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
         <!-- contact popup -->

    </footer>
    <!-- Footer Starts -->

</div>
<!-- Wrapper -->

<!-- Slide Menu -->
<div id="menu" class="res-menu" role="navigation">
    <div class="res-menu-holder">
        <!-- logo -->
        <div class="logo-holder">
            <a href="index.html" class="inner-logo"></a>
        </div>
        <!-- logo -->

        <!-- menu -->
        <ul class="res-nav">
            <li>
                <a data-toggle="collapse" href="#list-1"><i class="fa fa-angle-down pull-right"></i>Home</a>
                <ul class="collapse sub-list" id="list-1">
                    <li><a href="index.html">Version 1</a></li>
                    <li><a href="index-2.html">Version 2</a></li>
                    <li><a href="index-3.html">version 3</a></li> 
                </ul>
            </li>
            <li>
                <a data-toggle="collapse" href="#list-2"><i class="fa fa-angle-down pull-right"></i>categories</a>
                <ul class="collapse sub-list" id="list-2">
				   <li><a href="listing-page-1.html">fashion</a></li> 
				   <li><a href="listing-page-2.html">sports</a></li> 
				   <li><a href="listing-page-3.html">world</a></li> 
				   <li><a href="listing-page-4.html">lifestyle</a></li> 
				   <li><a href="listing-page-5.html">technology</a></li> 
				   <li><a href="listing-page-6.html">health</a></li> 
				   <li><a href="listing-page-7.html">MISC</a></li> 
                </ul>
            </li>
            <li>
                <a data-toggle="collapse" href="#list-3"><i class="fa fa-angle-down pull-right"></i>post</a>
                <ul class="collapse sub-list" id="list-3">
                    <li><a href="slider-post.html">slider post</a></li>
                    <li><a href="video-post.html">video post</a></li>
                    <li><a href="post-detail.html">blog detail</a></li>
                    <li><a href="post-detail-full-width.html">blog detail full width</a></li>
                </ul>
            </li>
            <li>
                <a data-toggle="collapse" href="#list-4"><i class="fa fa-angle-down pull-right"></i>shop</a>
                <ul class="collapse sub-list" id="list-4">
                    <li><a href="products.html">product </a></li>
                    <li><a href="products-detail.html">product detail</a></li>
                </ul>
            </li>
            <li>
                <a data-toggle="collapse" href="#list-5"><i class="fa fa-angle-down pull-right"></i>contact</a>
                <ul class="collapse sub-list" id="list-5">
                    <li><a href="contact.html">contact</a></li>
                    <li><a href="contact-2.html">contact 2</a></li>
                    <li><a href="contact-3.html">contact 3</a></li>
                </ul>
            </li>
            <li>
                <a data-toggle="collapse" href="#list-6"><i class="fa fa-angle-down pull-right"></i>404</a>
                <ul class="collapse sub-list" id="list-6">
                    <li><a href="error-404-1.html">error 1</a></li>
                    <li><a href="error-404-2.html">error 2</a></li>
                </ul>
            </li>
            <li>
                <a data-toggle="collapse" href="#list-7"><i class="fa fa-angle-down pull-right"></i>pages</a>
                <ul class="collapse sub-list" id="list-7">
                    <li><a href="faq.html">faq</a></li>
                    <li><a href="comming-soon.html">comming soon</a></li>
                </ul>
            </li>
        </ul>
        <!-- menu -->

        <!-- social icons -->
        <ul class="social-style-2">
            <li class="fb"><a href="#" class="fa fa-facebook"></a></li>
            <li class="tw"><a href="#" class="fa fa-twitter"></a></li>
            <li class="pi"><a href="#" class="fa fa-pinterest-p"></a></li>
            <li class="li"><a href="#" class="fa fa-linkedin"></a></li>
            <li class="sky"><a href="#" class="fa fa fa-skype"></a></li>
        </ul>
        <!-- social icons -->

        <!-- copyright -->
        <p><i class="fa fa-copyright"></i> All right reserved by <a href="#">Crizalpress</a> <i class="fa fa-heart"></i></p>
        <!-- copyright -->
    </div>
</div>
<!-- Slide Menu -->

<!-- register model -->
<div class="md-modal md-effect-1 login-modal font-oswald" id="register-popup">
    <div class="md-content">

        <!-- login socila buttons -->
        <ul class="login-social">
            <li class="fb"><a href="#"><i class="fa fa-facebook"></i>login with facebook</a></li>
            <li class="gmail"><a href="#"><i class="fa fa-google-plus" ></i>login with goolge+</a></li>
        </ul>
        <!-- login socila buttons -->

        <!-- or -->
        <span class="or-seprator">or</span>
        <!-- or -->

        <!-- sign up form -->
        <form class="signup-form">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                <input type="text" class="form-control" placeholder="First name*">
            </div>
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                <input type="text" class="form-control" placeholder="Last name">
            </div>
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                <input type="text" class="form-control" placeholder="Your Email*">
            </div>
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                <input type="text" class="form-control" placeholder="Password">
            </div>
             <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                <input type="text" class="form-control" placeholder="confirm password">
            </div>
            <div class="form-group">
                <a href="#" class="btn full-width green">get started</a>
            </div>
            <p>Already a member ? <a href="#" class="text-red">Login</a></p>
        </form>
        <!-- sign up form -->
        <a class="md-close pull-right" href="#"></a>
    </div>
</div>
<!-- register model -->

<!-- login model -->
<div class="md-modal md-effect-1 login-modal font-oswald" id="login-popup">
    <div class="md-content">

        <!-- login socila buttons -->
        <ul class="login-social">
            <li class="fb"><a href="#"><i class="fa fa-facebook"></i>login with facebook</a></li>
            <li class="gmail"><a href="#"><i class="fa fa-google-plus" ></i>login with goolge+</a></li>
        </ul>
        <!-- login socila buttons -->

        <!-- or -->
        <span class="or-seprator">or</span>
        <!-- or -->
        
        <!-- serach form -->
        <form class="login-form">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                <input type="text" class="form-control" placeholder="Enter your email">
            </div>
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                <input type="password" class="form-control" placeholder="*********">
            </div>
            <div class="form-group">
                <a href="#" class="btn full-width green">login</a>
            </div>
            <div class="form-group">
                <a href="#" class="forgot-password pull-right">Forgot password?</a>
                <div class="checkbox checkbox-inline">
                    <label>
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
            <p>Don't have a account ? <a href="#" class="text-red">Sign up</a></p>

            <a class="md-close pull-right" href="#"></a>
        </form>
        <!-- serach form -->

    </div>
</div>
<!-- login model -->

<!-- serach modal -->
<div class="md-modal md-effect-7 search-modal font-oswald" id="search-popup">
    <div class="md-content">
        <!-- serach form -->
        <form class="search-form">
            <input class="form-control" placeholder="Type &amp; hit enter" type="text">
        </form>
        <a class="md-close pull-right fa fa-times" href="#"></a>
        <!-- serach form -->
    </div>
</div>
<!-- serach modal -->

<!-- overlay -->
<div class="md-overlay"></div>
<!-- overlay -->

<!-- Switcher  Panel -->
<div class="switcher"></div>  
<!-- Switcher Panel -->

<!-- Java Script -->
<script src="js/vendor/jquery.js"></script>        
<script src="js/vendor/bootstrap.min.js"></script>  
<script src="http://ditu.google.cn/maps/api/js?sensor=false"></script>
<script src="js/gmap3.min.js"></script>              
<script src="js/parallax.js"></script>               
<script src="js/datepicker.js"></script>                 
<script src="js/ninja-slider.js"></script>                 
<script src="js/thumbnail-slider.js"></script>                 
<script src="js/countdown.js"></script> 
<script src="js/modal.js"></script>                 
<script src="js/classie.js"></script>                   
<script src="js/big-slide.js"></script> 
<script src="js/owl-carousel.js"></script>  
<script src="js/scrollbar.js"></script> 
<script src="js/prettyPhoto.js"></script>  
<script src="js/contact-form.js"></script>           
<script src="js/bxslider.js"></script>           
<script src="js/isotope.pkgd.js"></script>           
<script src="js/main.js"></script>                       

<!-- Switcher JS -->
<script type="text/javascript" src="switcher/cookie.js"></script>
<script type="text/javascript" src="switcher/colorswitcher.js"></script>
<!-- Switcher JS -->  
  					
</body>
</html>